<template>
    <div>
        <Form :label-width="100" ref="formInline" :model="formInline">
            <div v-if="switchFlag">
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                      <FormItem label="二级集团：" prop="postId">
                        <two-level-org org-code v-model="formInline.postId" ></two-level-org>
                      </FormItem>
                    </i-col>
                  <i-col span="8">
                    <FormItem label="企业名称：">
                      <company-select v-model="formInline.orgName"></company-select>
                    </FormItem>
                  </i-col>
                    <i-col span="8">
                        <FormItem label="排查人：" >
                            <Input v-model="formInline.userName" placeholder="请输入排查人"/>
                        </FormItem>
                    </i-col>
                </Row>
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                      <FormItem label="排查时间：">
                        <DatePicker v-model="formInline.se_date" type="datetimerange" style="width: 100%" format="yyyy-MM-dd" placeholder="请选择上报时间（开始，结束）"></DatePicker>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="任务名称：">
                            <Input v-model="formInline.taskName" placeholder="请输入任务名称"/>
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <div style="float: right;">
                            <Button class="ivu-btn-query"  icon="md-search"  @click="query">查询</Button>
                            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="cancel">重置</Button>
                            <Button @click="switchQuery(false)" style="margin-left: 10px" class="ivu-btn-switch2" type="text" >收起<Icon type="ios-arrow-up" /></Button>
                        </div>
                    </i-col>
                </Row>
            </div>
            <div v-else>
                <Row :gutter="16" class="query-form2">
                    <i-col span="8">
                      <FormItem label="二级集团：" prop="postId">
                        <two-level-org org-code v-model="formInline.postId" ></two-level-org>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                      <FormItem label="企业名称：">
                        <company-select v-model="formInline.orgName"></company-select>
                      </FormItem>
                    </i-col>
                    <i-col span="8">
                        <div style="float: right;">
                            <Button class="ivu-btn-query"  icon="md-search"  @click="query">查询</Button>
                            <Button class="ivu-btn-reset" style="margin-left: 10px" @click="cancel">重置</Button>
                            <Button @click="switchQuery(true)" style="margin-left: 5px" class="ivu-btn-switch2" type="text" >展开<Icon type="ios-arrow-down"/></Button>
                        </div>
                    </i-col>
                </Row>
            </div>
        </Form>
        <Table ref='table' style="margin-top: 10px" :loading="loading" border :columns="columns" no-data-text="没有查询到相关数据！" @on-sort-change="querySort"
               :data="infos" width="100%" :height="tableHeight" highlight-row stripe size="small"></Table>
        <Row type="flex" justify="end" >
            <i-col>
                <Page :total="pagedata.total" :current="pagedata.currentPage" :page-size="pagedata.pageSize"
                      @on-page-size-change="pageSizeChange" @on-change="pageChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </i-col>
        </Row>
        <Modal v-model="modal" width="900" :mask-closable="false" title="排查记录">
            <Spin fix v-if="spinShow">
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <div>表单信息加载中，请稍后</div>
            </Spin>
            <Form :label-width="130" >
                <Row >
                    <i-col>
                        <FormItem label="排查对象：">
                            {{formData.proName}}
                        </FormItem>
                    </i-col>
                </Row>
                <Row class="code-row-bg2">
                    <i-col>
                        <FormItem label="排查人所在机构：">
                            {{formData.orgName}}
                        </FormItem>
                    </i-col>
                </Row>
                <Row>
                    <i-col span="8">
                        <FormItem label="排查人：">
                            {{formData.userName}}
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="排查上报时间：">
                            {{formData.startTimeStr}}
                        </FormItem>
                    </i-col>
                    <i-col span="8">
                        <FormItem label="排查状态：">
                            {{formData.state}}
                        </FormItem>
                    </i-col>
                </Row>
                <Row class="code-row-bg2">
                    <i-col>
                        <FormItem label="排查内容描述：">
                            {{formData.remark}}
                        </FormItem>
                    </i-col>
                </Row>
            </Form>
            <Divider orientation="left" >隐患条目</Divider>
            <Table border :columns="itemColumns" no-data-text="没有查询到相关数据！"
                   :data="itemInfos" width="100%" height="200" highlight-row stripe size="small"></Table>
            <Divider orientation="left" >隐患列表</Divider>
            <Table border :columns="inverstigationColumns" no-data-text="没有查询到相关数据！"
                   :data="inverstigationInfos" width="100%" height="200" highlight-row stripe size="small"></Table>
            <div slot="footer">
                <Button @click="modal = false"  class="ivu-btn-save">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

    import {Api} from '../../../api'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import {sessionStorage} from '@/common/cacheUtils.js';
    import orgDom from "@/components/input-org.vue";

    export default {
        name: "checkrecordList",
        components:{
            cascaderDom,
            orgDom
        },
        data(){
            return{
                spinShow: false,
                switchFlag: false,
                modal: false,
                tableHeight: '',
                formInline: {
                    se_date: []
                },
                loading: false,
                formData: {},
                columns: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                        fixed: 'left',
                    },
                    {
                        title: '任务名称',
                        align: 'center',
                        key: 'taskName',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.taskName || '--')
                            ]);
                        }
                    },
                    {
                        title: '排查人',
                        align: 'center',
                        key: 'userName',
                        minWidth: 80,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.userName || '--')
                            ]);
                        }
                    },
                    {
                        title: '排查时间',
                        align: 'center',
                        key: 'startTimeStr',
                        sortable: 'custom',
                        minWidth: 150,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.startTimeStr || '--')
                            ]);
                        }
                    },
                    {
                        title: '排查状态',
                        align: 'center',
                        key: 'state',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.state || '--')
                            ]);
                        }
                    },
                    {
                        title: '排查对象',
                        align: 'center',
                        key: 'orgName',
                        minWidth: 150,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.orgName || '--')
                            ]);
                        }
                    },
                    {
                        title: '排查内容描述',
                        align: 'center',
                        key: 'remark',
                        minWidth: 150,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.remark || '--')
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        key: 'view',
                        fixed: 'right',
                        minWidth: 100,
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            this.modal = true;
                                            this.spinShow = true;
                                            this.$http.get(Api.apsgCheckrecord + '/'+ params.row.id, {
                                                params: {}
                                            }).then(function(res){
                                                this.formData = res.data;
                                                this.itemInfos = res.data.checkrecordItems;
                                                this.inverstigationInfos = res.data.inverstigation;
                                                this.spinShow = false;
                                            });
                                        }
                                    }
                                }, '详情')
                            ]);
                        }
                    }
                ],
                infos: [],
                pagedata: {
                    total: 0,
                    pageSize: 10,
                    currentPage: 1
                },
                pageSizeArray: [10, 20, 50],
                itemColumns: [
                    {
                    type: 'index',
                    title: '序号',
                    width: 80,
                    align: 'center',
                    fixed: 'left',
                },
                    {
                        title: '状态',
                        align: 'center',
                        key: 'userName',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div', [
                                h('span', {
                                    style: {
                                        color: params.row.state == 0 ? 'green': 'red'
                                    }
                                },params.row.state == 0 ? '安全': '有隐患')
                            ]);
                        }
                    },
                    {
                        title: '级别',
                        align: 'center',
                        key: 'level',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.level || '--')
                            ]);
                        }
                    },
                    {
                        title: '条目编码',
                        align: 'center',
                        key: 'code',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.code || '--')
                            ]);
                        }
                    },
                    {
                        title: '条目类型',
                        align: 'center',
                        key: 'userName',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.type1 == null? '自定义隐患' : params.row.type3+'>>'+params.row.type2+'>>'+params.row.type1 || '--')
                            ]);
                        }
                    },
                    {
                        title: '条目内容',
                        align: 'center',
                        key: 'content',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.content || '--')
                            ]);
                        }
                    },
                    {
                        title: '排查时间',
                        align: 'center',
                        key: 'reportDateStr',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.reportDateStr || '--')
                            ]);
                        }
                    },
                ],
                itemInfos: [],
                inverstigationColumns: [
                    {
                        type: 'index',
                        title: '序号',
                        width: 80,
                        align: 'center',
                        fixed: 'left',
                    },
                    {
                        title: '状态',
                        align: 'center',
                        key: 'level',
                        minWidth: 120,
                        render:(h,params)=>{
                            let color = 'green';
                            if(params.row.status == undefined || params.row.status == null){
                                color = 'red';
                            }
                            return h('div', [
                                h('span', {
                                    style: {
                                        color: color
                                    }
                                },params.row.status == 1 ? '审批中': params.row.status == 2 ? '被退回': params.row.status == 3 ? '已消除': '未上报' || '--')
                            ]);
                        }
                    },
                    {
                        title: '流水号',
                        align: 'center',
                        key: 'flowNo',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.flowNo || '--')
                            ]);
                        }
                    },
                    {
                        title: '分类',
                        align: 'center',
                        key: 'level',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.apItemType == null? '--' : params.row.type+'>>'+params.row.itemType+'>>'+params.row.apItemType || '--')
                            ]);
                        }
                    },
                    {
                        title: '级别',
                        align: 'center',
                        key: 'level',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.level || '--')
                            ]);
                        }
                    },
                    {
                        title: '内容',
                        align: 'center',
                        key: 'content',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.content || '--')
                            ]);
                        }
                    },
                    {
                        title: '描述',
                        align: 'center',
                        key: 'remark',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span',params.row.remark || '--')
                            ]);
                        }
                    },],
                inverstigationInfos: []
            }
        },
        mounted(){
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
            this.formInline.se_date = [new Date(new Date().getFullYear()+'-01-01'), new Date()];
            this.query();
        },
        methods: {
            switchQuery(flag){
                this.switchFlag = flag;
                if(this.switchFlag) {
                    this.tableHeight = this.tableHeight - 44;
                }else{
                    this.tableHeight = this.tableHeight + 44;
                }
            },
            query(){
                this.loading = true;
                let user = sessionStorage('userId').getObject('userId');
                let data = {
                    startPage: this.pagedata.currentPage,
                    pageSize: this.pagedata.pageSize,
                    userId: user.userId,
                    proName: user.companyName
                };
                if(this.formInline.se_date.length!=0){
                    if(this.formInline.se_date[0]!= '') this.formInline.startTimeStr = this.formatDate(new Date(this.formInline.se_date[0]), 'yyyy-MM-dd');
                    if(this.formInline.se_date[1]!= '') this.formInline.endTimeStr = this.formatDate(new Date(this.formInline.se_date[1]), 'yyyy-MM-dd');
                }
                data = Object.assign(data,JSON.parse(JSON.stringify(this.formInline)));
                this.$http.get(Api.apsgCheckrecord, {
                    params: data
                }).then(function(res){
                    this.infos = res.data.data;
                    this.pagedata.total = res.data.totalSize;
                    this.loading = false;
                }, function(res){
                    this.$Message.error('请求失败');
                });
            },
            cancel(){
                this.formInline = {
                    se_date: []
                };
                if(this.$refs.orgDom!= undefined){
                    this.$refs.orgDom.resetCurrentOrg();
                }
                this.query();
            },
            pageSizeChange(pageSize){
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            pageChange(pageNum){
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            setOrgId(data) {
                this.formInline.proId = data.orgId;
            },
            setOrgName(data) {

            },
            formatDate(date, fmt) {
                if (typeof date == 'string') {
                    return date;
                }
                if (!fmt) fmt = "yyyy-MM-dd hh:mm:ss";
                if (!date || date == null) return null;
                let o = {
                    'M+': date.getMonth() + 1, // 月份
                    'd+': date.getDate(), // 日
                    'h+': date.getHours(), // 小时
                    'm+': date.getMinutes(), // 分
                    's+': date.getSeconds(), // 秒
                    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
                    'S': date.getMilliseconds() // 毫秒
                }
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
                for (let k in o) {
                    if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
                }
                return fmt
            },
            querySort({column, key, order}){
              this.formInline.key = key;
              this.formInline.order = order;
              this.query();
            }
        }
    }
</script>

<style lang='css' scoped>
    @import '../../../index.css';
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
</style>
